<template>
  <div class="app-container">
    <el-form ref="helpForm" :model="helpsForm" label-width="100px" class="massageForm">
      <el-row :gutter="10">
        <el-col :span="18" :offset="3">
          <el-col :span="24">
            <h3>{{ helpsForm.title }}</h3>
            <p>收件人：{{ helpsForm.userNames }}</p>
            <div class="div">
              <span>通知时间：{{ helpsForm.sendTime }}</span><span>发布人：{{ helpsForm.publisher }}</span>
            </div>
            <h1>{{ helpsForm.msgCategory | filtersMsgCategory }}</h1>
            <div class="div" v-html="helpsForm.msgContent" />
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="danger" plain @click="cancel()">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { readDetail } from '@/api/my-massage'
var typeData
export default {
  components: {},
  filters: {
    filtersMsgCategory(val) {
      for (var i = 0; i < typeData.msgCategoryOption.length; i++) {
        if (typeData.msgCategoryOption[i].value == val) {
          return typeData.msgCategoryOption[i].label
        }
      }
    },
    filtersPriority(val) {
      for (var i = 0; i < typeData.priorityOption.length; i++) {
        if (typeData.priorityOption[i].value == val) {
          return typeData.priorityOption[i].label
        }
      }
    },
    filtersReadFlag(val) {
      for (var i = 0; i < typeData.readFlagOption.length; i++) {
        if (typeData.readFlagOption[i].value == val) {
          return typeData.readFlagOption[i].label
        }
      }
    },
  },
  props: {
    helpForm: {
      type: Number,
    },
    clickType: {
      type: String,
      default: function() {
        return ''
      },
    },
    classificationList: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  data() {
    return {
      massageId: this.$route.query.id,
      helpsForm: {},
      // 优先级
      priorityOption: [
        {
          label: '高',
          value: 'H',
        },
        {
          label: '中',
          value: 'M',
        },
        {
          label: '低',
          value: 'L',
        },
      ],
      // 消息类型
      msgCategoryOption: [
        {
          label: '通知公告',
          value: '1',
        },
        {
          label: '系统消息',
          value: '2',
        },
      ],
      // 用户类型
      msgTypeOption: [
        {
          label: '指定用户',
          value: 'USER',
        },
        {
          label: '全体用户',
          value: 'ALL',
        },
      ],
      // 发布状态
      sendStatusOption: [
        {
          label: '未发布',
          value: 0,
        },
        {
          label: '已发布',
          value: 1,
        },
        {
          label: '已撤销',
          value: 2,
        },
      ],
      // 模糊搜索 用户名
      loading: false,
      userNames: [],
    }
  },
  computed: {},
  watch: {
    massageId: {
      handler: function(newData, old) {
        this.massageId = this.$route.query.id
      },
      immediate: true,
    },
  },
  // 在生命周期 beforeCreate里面改变this指向
  beforeCreate: function() {
    typeData = this
  },
  mounted() {
    this.$nextTick(() => {
      this.gitNewMassage()
    })
  },
  methods: {
    gitNewMassage() {
      if (this.helpForm != undefined) {
        this.massageId = this.helpForm
      }
      readDetail(this.massageId).then((res) => {
        this.helpsForm = res.data
      })
    },
    cancel() {
      console.log(this.massageId)
      if (this.massageId == null) {
        this.$parent.$parent.colseDialog('no')
      } else {
        this.$router.push('/my-massage')
      }
    },
  },
}
</script>
<style scoped lang="scss">
.massageForm {
  padding-bottom: 50px;
  h1 {
    line-height: 50px;
    padding: 0 12px;
  }
  h3 {
    line-height: 50px;
    background: #eeffcc;
    border-bottom: 1px solid #aaa;
    padding: 0 12px;
  }
  p {
    line-height: 20px;
    padding: 12px;
    border-bottom: 1px solid #aaa;
  }
  .div {
    padding: 0 12px;
    span {
      padding-right: 20px;
    }
  }
}
</style>
